<template>
    <el-drawer v-model="isDrawerVisible" title="订单详情" :with-header="true">
        <el-descriptions direction="vertical" :column="3" size="large" border>
            <el-descriptions-item label="订单编号">{{order.dingdan_num}}</el-descriptions-item>
            <el-descriptions-item label="订单用户名">{{order.name}}</el-descriptions-item>
            <el-descriptions-item label="用户电话">{{order.phone}}</el-descriptions-item>
            <el-descriptions-item label="店铺名称">{{order.shop_name}}</el-descriptions-item>
            <el-descriptions-item label="骑手名称">{{order.rider_name}}</el-descriptions-item>
            <el-descriptions-item label="地址">{{order.address}}</el-descriptions-item>

            <el-descriptions-item label="订单菜名">
                <el-tag v-for="(dishes, index) in order.dishes_name" :key="index">
                    菜名：{{dishes.dish_name}}
                    数量:{{dishes.num}}
                    价格：{{dishes.price}}
                </el-tag>
<!--                {{order.dishes_name}}-->

            </el-descriptions-item>

            <el-descriptions-item label="金额">{{order.price}}</el-descriptions-item>
            <el-descriptions-item label="状态">
                    <el-tag v-if="order.state === '0'" type="warning">待商家接单</el-tag>
                    <el-tag v-else-if="order.state === '1'" type="danger">商家已拒绝</el-tag>
                    <el-tag v-else-if="order.state === '2'" type="success">商家已接单，待骑手接单</el-tag>
                    <el-tag v-else-if="order.state === '3'" type="success">骑手已接单</el-tag>
                    <el-tag v-else-if="order.state === '4'" type="success">配送中</el-tag>
                    <el-tag v-else-if="order.state === '5'" type="success">已完成</el-tag>
<!--                {{ order.state}}-->
            </el-descriptions-item>
            <el-descriptions-item label="下单时间">{{order.time}}</el-descriptions-item>
            <el-descriptions-item label="配送完成时间">{{order.end_time}}</el-descriptions-item>
            <el-descriptions-item label="配送费">{{order.gratuity}}</el-descriptions-item>
            <el-descriptions-item label="订单备注">{{order.remark}}</el-descriptions-item>
        </el-descriptions>
    </el-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 控制抽屉的显示
const isDrawerVisible = ref(false);

const order=ref({
    id:'',//id
    dingdan_num: '',//订单编号
    name: '',//订单用户名
    shop_name: '',//商家名字
    rider_name: '',//配送员名字
    phone:'',//订单用户手机号
    address: '',//订单用户地址
    dishes_name:'',//订单菜名
    state: '',//订单状态
    price: '',//订单价格
    time: '',//下单时间
    end_time: '',//配送完成时间
    gratuity: '',//配送费
    remark: '',//订单备注
});

// 接收父组件传递过来的 对象 数据
const handleDetailData = (obj) => {
    isDrawerVisible.value = true;
    order.value = obj;
}

// 将 handleDetailData 暴露给父组件
defineExpose({
    handleDetailData
})
</script>

<style scoped >

</style>